<template>
    <!-- 维护作业-职业代码维护页面 -->
    <div class="fillcontain">
        <el-form :model="searchParams" v-m ref="ruleForm" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6" class="common-box">
                    <el-col :span="8" class="common-lab">
                        <label class="labelName">职业代码</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input clearable placeholder="" v-model="searchParams.occpcden"></el-input>
                    </el-col>
                </el-col>
                <el-col :span="6" class="common-box">
                    <el-col :span="8" class="common-lab">
                        <label class="labelName">职业名称</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input clearable placeholder="" v-model="searchParams.doccdesco"></el-input>
                    </el-col>
                </el-col>
                <el-col :span="6" class="common-box">
                    <el-col :span="8" class="common-lab">
                        <label class="labelName">职业等级</label>
                    </el-col>
                    <el-col :span="16">
                        <el-select v-model="searchParams.mortcls">
                            <el-option v-for="item in mortclsType" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
            <el-row class="bgfff pb15">
                <el-col :span="24" class="pt5">
                    <el-button type="danger" @click="employmentAddGo" plain>新增</el-button>
                </el-col>
            </el-row>
            <!-- 查询结果 -->
            <div class="table_container">
                <el-table v-loading="loading" :data="occupationCodetableData" highlight-current-row header-cell-class-name="table-header-class"
                    style="width:100%">
                    <el-table-column min-width="120" property="occpcden" label="职业代码" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column min-width="120" property="doccdesco" label="职业名称" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column min-width="120" property="mortcls" label="职业等级" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column min-width="120" fixed="right" label="操作" align='center'>
                        <template slot-scope="scope">
                            <!-- <el-button type="text" size="small" @click="occupationCodeUpdateGo(scope.row)">修改</el-button> -->
                            <span class="operationIcon" @click="occupationCodeUpdateGo(scope.row)">
                              <el-tooltip class="item" effect="light" content="修改" placement="top">
                                <i class="el-icon-edit"></i>
                              </el-tooltip>
                          </span>
                            <!-- <el-button type="text" size="small" @click="employmentDelete(scope.row)">删除</el-button> -->
                            <span class="operationIcon ml5" @click="employmentDelete(scope.row)">
                                <el-tooltip class="item" effect="light" content="删除" placement="top">
                                  <i class="el-icon-delete"></i>
                                </el-tooltip>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24">
                        <div class="pagination">
                            <el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
                                :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex'
                                @current-change='handleCurrentChange' @size-change='handleSizeChange'>
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 弹框 修改-->
        <el-dialog title="职业代码维护修改" :visible.sync="occupationCodeDialog" width="60%" center>
            <el-form ref="form" label-width="120px">
                <el-row>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                            <label class="labelName">职业代码</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input v-if="update" disabled clearable placeholder="" v-model="employmentDetail.occpcden"></el-input>
                            <el-input v-else clearable placeholder="" v-model="employmentDetail.occpcden"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                            <label class="labelName">职业名称</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input clearable placeholder="" v-model="employmentDetail.doccdesco"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                            <label class="labelName">职业等级</label>
                        </el-col>
                        <el-col :span="16">
                            <el-select v-model="employmentDetail.mortcls">
                                <el-option v-for="item in mortclsType" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="saveEmployment" class="Defaultbutton">保 存</el-button>
                <el-button @click="occupationCodeDialog = false">返 回</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import { getEmploymentList, deleteEufnpky, updateEufnpky } from '@/api/setting/maintain/employment.js';
    export default {
        data() {
            return {
                occupationCodeDialog: false,//默认隐藏 告知事项代码维护修改弹框
                // 查询条件
                searchParams: {
                    occpcden: '',
                    doccdesco: '',
                    mortcls: '',
                },
                occupationCodetableData: [//数据
                ],
                loading: false,
                update: false,
                mortclsType: [
                    { value: 'N', label: 'N' },
                    { value: '1', label: '1' },
                    { value: '2', label: '2' },
                    { value: '3', label: '3' },
                    { value: '4', label: '4' },
                    { value: '5', label: '5' },
                    { value: '6', label: '6' },
                    { value: '7', label: '7' },
                ],
                employmentDetail: {},
                //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            //编辑弹窗
            occupationCodeUpdateGo(row) {
                this.occupationCodeDialog = true;
                this.employmentDetail = row;
                this.update = true;

            },
            //新增弹窗
            employmentAddGo() {
                this.employmentDetail = {}
                this.occupationCodeDialog = true;
                this.update = false;
            },
            //删除
            employmentDelete(item) {
              this.$confirm('确定要删除该条信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                let param = {
                  "occpcden": item.occpcden,
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                deleteEufnpky(param).then(res => {
                  this.$store.dispatch('loading/CHANGE_LOADING', false)
                  if (res.resultCode == constant.SUCCESS) {
                    this.popMsg("删除成功","success");
                    this.getList();
                  }
                }).catch(err => {
                  this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
              }).catch(() => {

              });


            },
            //保存信息
            saveEmployment() {
                if (this.employmentDetail.occpcden == null || this.employmentDetail.occpcden == "") {
                    this.popMsg("职业代码不能为空!", "error");
                    return;
                }
                if (this.employmentDetail.doccdesco == null || this.employmentDetail.doccdesco == "") {
                    this.popMsg("职业名称不能为空!", "error");
                    return;
                }
                if (this.employmentDetail.mortcls == null || this.employmentDetail.mortcls == "") {
                    this.popMsg("职业等级不能为空!", "error");
                    return;
                }
                if (this.update) {
                    this.employmentDetail.method = "modify";
                } else {
                    this.employmentDetail.method = "add";
                }
                this.$store.dispatch('loading/CHNAGE_SUBLOADING', true)
                updateEufnpky(this.employmentDetail).then(res => {
                  this.$store.dispatch('loading/CHNAGE_SUBLOADING', false)
                  if (res.resultCode == constant.SUCCESS) {
                        this.popMsg("保存成功","success");
                        this.occupationCodeDialog = false;
                        this.getList();

                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHNAGE_SUBLOADING', false)
                })

            },
            // 查询列表
            getList() {
                let para = {
                    "occpcden": this.searchParams.occpcden,
                    "doccdesco": this.searchParams.doccdesco,
                    "mortcls": this.searchParams.mortcls,
                    "pageSize": this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                getEmploymentList(para).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.resultCode == constant.SUCCESS && res.data) {
                        if (res.data.list.length > 0) {
                            this.paginations.total = res.data.total;
                            this.occupationCodetableData = res.data.list;
                        } else {
                            this.popMsg("无符合条件资料!", "error");
                            this.paginations.total = 0;
                            this.occupationCodetableData = [];
                        }

                    }

                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
                this.paginations.pageSize = pageSize;
                this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
                this.paginations.pageIndex = page;
                this.getList();
            },
            // 根据条件查询列表
            subGetList() {
                this.paginations.pageIndex = 1;
                this.getList();
            },
            // 清除查询条件
            resetSearch() {
                this.searchParams.occpcden = '';
                this.searchParams.doccdesco = '';
                this.searchParams.mortcls = '';
            },
            popMsg(message, type) {
                this.$message({
                    message: message,
                    type: type
                });
            },
        },
        computed: {
            ...mapGetters(['tags']),
            reload() {
                return this.$store.state.loading.reload;
            }
        },
        activated() {
            if (this.reload) {
                this.$store.dispatch('loading/CHNAGE_RELOAD', false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }

</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;
    }

    .search_container {
        padding: 20px 20px 0 20px; //    border-top: 1px solid #e1e1e1;
    }

    .common-box {
        padding-bottom: 15px;
    }

    .common-lab {
        line-height: normal!important;
        text-align: right;
        .labelName {
            text-align: right;
        }
    }
</style>